import React, { useEffect, useState } from 'react';
import './styles.less';
import { TypeConfig } from './config';
import request from '@/utils/request';
import { interfaceConfig } from '@/config/interfaceConfig';
import classnames from 'classnames';
import { Pagination } from 'antd';
import { useNavigate } from 'react-router-dom';
import _ from 'lodash';

const Index = () => {
  const navigate = useNavigate();
  const [playlist, setPlaylist] = useState({});
  const [data, setData] = useState([]);
  const [cat, setCat] = useState('全部');
  const [pageOptions, setPageOptions] = useState({
    page: 1,
    size: 10,
  });
  const [total, setTotal] = useState(0);
  useEffect(() => {
    request
      .get(interfaceConfig.Highquality, {
        params: {
          limit: 1,
          cat,
        },
      })
      .then((ret) => {
        if (ret.code === 200) {
          setPlaylist(ret.playlists[0]);
        }
      });
  }, [cat]);
  useEffect(() => {
    const { size, page } = pageOptions;
    request
      .get(interfaceConfig.Playlist, {
        params: {
          limit: size, // 每页多少个
          offset: (page - 1) * size, // 第几页
          cat,
        },
      })
      .then((ret) => {
        if (ret.code === 200) {
          setData(ret.playlists);
          setTotal(ret.total);
        }
      });
  }, [cat, pageOptions]);
  function onChange(page, pageSize) {
    setPageOptions((origin) => ({
      ...origin,
      page,
      size: pageSize,
    }));
  }
  const handlerClick = (item) => {
    navigate('/RecommendMusic/SongListDetail/' + item.id);
  };
  const { page } = pageOptions;

  return (
    <>
      <div className="normal">
        <div className="imgdiv">
          <img src={playlist.coverImgUrl} alt="" />
        </div>
        <div className="textdiv">
          <div>精品歌单</div>
          <span>{playlist.name}</span>
          <p>{playlist.description}</p>
        </div>
      </div>

      <div className="listbox">
        <ul className="listUl">
          {TypeConfig.map((item) => {
            return (
              <li
                className={classnames('type-item', {
                  'type-item-active': item.name === cat,
                })}
                onClick={() => setCat(item.name)}
                key={item.id}
              >
                {item.name}
              </li>
            );
          })}
        </ul>
      </div>
      <div className="bigdiv">
        {data.map((item, key) => {
          return (
            <div className="litteldiv" key={item.id}>
              <div className="musicImg">
                <img src={item.coverImgUrl} alt="" />
                <span className="iconfont icon-bofang1" onClick={() => handlerClick(item)}></span>
              </div>
              <span>{item.name}</span>
            </div>
          );
        })}
      </div>
      {!_.isEmpty(data) && <Pagination style={{ textAlign: 'center' }} showSizeChanger={false} onChange={onChange} current={page} total={total} />}
    </>
  );
};

export default Index;
